<template>
  <el-card class="animate__animated animate__fadeInLeft">
    <div class="flex justify-between">
      <el-button type="primary" size="small" @click="visible = true"
        >添加商品类别</el-button
      >
      <el-input
        prefix-icon="el-icon-search"
        placeholder="请输入搜索的内容"
        class="inp"
      />
    </div>

    <!-- 提供的对话框 -->
    <el-dialog title="新建商品分类" :visible.sync="visible">
      <!-- <h1>{{ isbool? }}</h1> -->
      <CategoryViewEdit v-bind.sync="body" />
      <template v-slot:footer>
        <el-button @click="visible = false">取 消</el-button>
        <el-button type="primary" :loading="loading" @click="onSave"
          >确 定</el-button
        >
      </template>
    </el-dialog>

    <el-table
      :data="commoditycategory.results"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      border
      lazy
      :load="load"
      :tree-props="{ children: 'children', hasChildren: 'has_children' }"
    >
      <el-table-column prop="id" label="编号" width="180"> </el-table-column>
      <el-table-column prop="name" label="名称"> </el-table-column>
      <el-table-column prop="banner_image_alt" label="类别图" width="180">
        <template v-slot="{ row }">
          <img :src="row.banner_image_alt" />
        </template>
      </el-table-column>

      <el-table-column prop="level" label="类别层级">
        <template v-slot="commoditycategory">
          <div class="text">{{ commoditycategory.row.level + 1 }}级分类</div>
        </template>
      </el-table-column>
      <el-table-column prop="sort_order" label="显示顺序"> </el-table-column>
      <el-table-column prop="" label="操作">
        <template v-slot="{ row }">
          <el-link
            type="primary"
            href="#"
            class="el-icon-edit"
            @click.native="onEdit(row)"
            >编辑</el-link
          >
          <!-- <el-popconfirm title="这是一段内容确定删除吗？"> -->
          <el-link
            type="danger"
            class="el-icon-delete"
            slot="reference"
            @click.native="Delete(row)"
            >删除
          </el-link>
          <!-- </el-popconfirm> -->
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>
<script>
import { mapActions, mapState, mapGetters } from "vuex";
import CategoryViewEdit from "@/views/product/category/CategoryViewEdit.vue";
// import DeleteCategory from "@/views/product/category/DeleteCategory.vue";
let mapResolve = {}; //存储resolve
export default {
  name: "CommodityCategory",
  components: {
    CategoryViewEdit,
  },
  data() {
    return {
      // dialogVisible: false,
      // list: this.commoditycategory.results,
      visible: false,
      loading: false,
      body: {
        id: -1,
        name: "",
        description: "",
        sort_order: 1,
        parent: null,
        banner_image_alt: "",
        // image: 0,
      },
      keyword: "",
      form: {
        name: "",
        region: "",
      },
      formLabelWidth: "120px",
    };
  },
  methods: {
    ...mapActions("category", [
      "getCategory",
      "createCategory",
      "editcategory",
      "delete",
    ]),
    Delete(row) {
      // console.log(data);
      //弹框
      this.$confirm("你确定你删除吗", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          let data = await this.delete(row);
          if (data) {
            //当用户点击确定时触发
            this.$message({
              type: "success",
              message: "删除成功",
            });
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消删除",
          });
        });
    },

    load(tree, treeNode, resolve) {
      // resolve是懒加载的数据加载方法
      console.log(mapResolve);
      mapResolve[tree.id] = { tree, resolve };
      console.log(tree);
      // console.log(tree, treeNode, resolve);
      setTimeout(() => {
        resolve(tree.children);
      }, 1000);
    },
    async onSave() {
      let data;
      if (this.body.id == -1) {
        data = await this.createCategory(this.body);
      } else {
        data = await this.editcategory(this.body);
      }
      //创建商品

      console.log(data);
      this.visible = false;
      if (data.parent) {
        this.onLoad(data.parent); // 重新加载数据
      }
      this.body = {
        id: -1,
        name: "",
        description: "",
        sort_order: 1,
        parent: null,
        // image: -,
        banner_image_alt: "",
      };
    },
    // 重新加载数据
    onLoad(id) {
      // console.log(mapResolve[id]);
      // console.log(id);
      try {
        let { resolve } = mapResolve[id];
        resolve & resolve(this.getChildrenList(id));
      } catch (err) {
        console.log(err);
      }
      // resolve(this.getChildrenList(id));
      console.log(this.getChildrenList(id));
      // // 2.使用resolve重新加载数据
      // console.log(tree.children);
      // resolve(this.getChildrenList(id)); //当前父级中的最新的子元素
    },
    async onEdit(data) {
      let temp = { ...data };
      this.visible = true;
      delete temp.children;
      this.body = { ...temp };
      console.log(data);
    },
  },
  computed: {
    ...mapState("category", ["commoditycategory"]),
    ...mapGetters("category", ["getChildrenList"]),
  },

  created() {
    this.getCategory();
    // console.log(this.list);
  },
  watch: {
    visible(val) {
      if (!val) {
        this.body = {
          id: -1,
          name: "",
          description: "",
          sort_order: 1,
          parent: null,
          // image: -,
          banner_image_alt: "",
        };
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.cell > img {
  width: 40px;
  height: 40px;
}
.text {
  width: 60px;
  height: 20px;
  background-color: #f0f9eb;
  color: #67c23a;
}
.el-icon-delete {
  color: red;
  margin-left: 20px;
}
.el-icon-edit {
  color: #3a8ee6;
}
.el-button {
  width: 130px;
  height: 40px;
  background-color: #3a8ee6;
  color: white;
}
.el-table > .el-table__body-wrapper {
  overflow: auto;
  position: relative;
  height: 500px;
  margin-bottom: -16px;
}
::-webkit-scrollbar {
  width: 4px;
  height: 3px;
}
// ::-webkit-scrollbar-track {
//   border-radius: 3px; /*滚动条的背景区域的圆角*/
// }
// ::-webkit-scrollbar-thumb {
//   border-radius: 3px; /*滚动条的圆角*/
//   background-color: #ccc; /*滚动条的背景颜色*/
// }

// ::-webkit-scrollbar-thumb:hover {
//   background-color: #bbb;
// }

// ::-webkit-scrollbar-thumb:active {
//   cursor: pointer;
// }
.inp {
  width: 250px;
  // padding-left: 30px;
  float: right;
}
.animate__animated {
  height: 550px;
  overflow: scroll;
}
</style>
